<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-09 
 -->

<template>
  <div class="flex flex-1 flex-col justify-center items-center py-4 text-gray-500" :style="`background-color: ${item.bgColor}`">
    <h1 class="text-base">{{ item.title }}</h1>
    <p class="text-xl mt-3">{{ data[item.field] || 0 }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "~Item",
  props: {
    item: Object,
    data : Object
  },
  setup(props, { emit, slots }) {
    return {};
  },
});
</script>

<style lang="css" scoped></style>
